<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>我的收藏---知道吗</title>
</head>
<body>
<jsp:include page="/topNav"></jsp:include>
<form name="contentForm" method="get" action="viewTheContents">
    <input type="hidden" name="id" id="id" value="" />
</form>
<div class="container">

    <div class="row">
        <div class="col-xs-7" style="margin-top: -20px">
            <h4 class="page-header">全部收藏</h4>
            <c:if test="${tutorialData.myCollections != null}">
                <c:forEach var="tutorial" items="${tutorialData.myCollections}">
                    <div class="media" id="${tutorial.id}_all">
                        <img class="media-object pull-left" src="${tutorial.titleImgPath}" width="128" length="128"
                             style="margin-top: 15px">

                        <div class="media-body">
                            <p style="color: #999999;margin-bottom: 3px;margin-left: 5px;">${tutorial.userName}&nbsp;&nbsp;
                                &nbsp;<fmt:formatDate
                                        value="${tutorial.createTime}"
                                        type="both"
                                        pattern="YYYY-MM-dd HH:mm:ss" />&nbsp;
                                &nbsp;&nbsp;
                                    ${tutorial.scorecount}人评分&nbsp;
                                平均<font color="green" size="5">
                                    <c:if test="${tutorial.scorecount != 0}">
                                        <fmt:formatNumber value="${tutorial.totalscore/tutorial.scorecount}" pattern="0.0" />
                                    </c:if>
                                    <c:if test="${tutorial.scorecount == 0}">
                                        <fmt:formatNumber value="0.0" pattern="0.0" />
                                    </c:if></font>分
                            </p>
                            <h4 class="media-heading"><a href="javascript:show(${tutorial.id})">${tutorial.title}</a></h4>

                            <div class="caption" style="margin-left: 5px">
                                <p>${tutorial.introduce}</p>

                                <p style="color: #999999">
                                    <span class="glyphicon glyphicon-eye-open"></span>&nbsp;${tutorial.views}次浏览&nbsp;&nbsp;
                                    <span class="glyphicon glyphicon-comment"></span>&nbsp;0条评论
                                    &nbsp;&nbsp;
                                    <span id="${tutorial.id}">
                                                <span class="glyphicon glyphicon-star"></span>&nbsp;
                                        <a href="javascript:unStoreTutorialForMyCollection(${tutorial.id})" style="color:
                                            #999999">取消收藏</a></span></p>
                            </div>
                        </div>
                    </div>
                </c:forEach>
                <c:if test="${tutorialData.mycollections_requires_pagination}">
                    <button type="button" id="loading-more" data-loading-text="加载中..." class="btn btn-block"
                            style="margin-bottom: 20px">更多
                    </button>
                </c:if>
            </c:if>
            <c:if test="${tutorialData.myCollections == null}">
                <div class="text-center">暂无内容</div>
            </c:if>

        </div>


        <div class="col-xs-4">
            <h2 class="page-header"></h2>

            <ul class="nav nav-list">
                <li>
                    <a href="/Origami/myTutorials" style="color: #646464">
                        <span class="glyphicon glyphicon-file"></span>&nbsp;&nbsp;&nbsp;&nbsp;我的教程
                    </a>
                </li>
                <li>
                    <a href="/Origami/myCollection" style="color: #646464">
                        <span class="glyphicon glyphicon-star"></span>&nbsp;&nbsp;&nbsp;&nbsp;我的收藏
                    </a>
                </li>
                <li>
                    <a href="#" style="color: #646464">
                        <span class="glyphicon glyphicon-comment"></span>&nbsp;&nbsp;&nbsp;&nbsp;我评论的
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
<link href="bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="bootstrap/user_defined.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="uploadify/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="js/storeTutorial.js"></script>
<script language="javascript">
    function show(id) {
        document.getElementById("id").setAttribute("value", id);
        contentForm.submit();
    }

    var page = 2;
    $('#loading-more').click(function () {
        var btn = $(this)
        btn.button('loading')
        $.ajax({
            url: "/Origami/showMoreCollections",
            type: "post",
            data: {page: page},
            dataType: "json",
            async: false,
            success: function (data) {
                var tutorialData = data;
                var myCollections = tutorialData.myCollections;
                if(myCollections !=null){
                    for (var i = 0; i < myCollections.length; i++) {
                        $("#loading-more").before("<div class='media' id='"+ myCollections[i].id+"_all'><img class = 'media-object pull-left' src = " +
                                "'" + myCollections[i].titleImgPath + "' width = '128' length = '128' style = 'margin-top:15px'><div class = 'media-body'><p  style = 'color: #999999;margin-bottom: 3px;margin-left: 5px;' >" + myCollections[i].userName + "&nbsp;&nbsp;&nbsp;<fmt:formatDate value='${myCollections[i].createTime}' type='both' pattern='YYYY-MM-dd HH:mm:ss' />&nbsp;&nbsp;&nbsp;"
                                + myCollections[i].scorecount + "人评分&nbsp;平均 <font color = 'green' size = '5'><c:if test='${myCollections[i].scorecount != 0}'><fmt:formatNumber value='${myCollections[i].totalscore/myCollections[i].scorecount}' pattern='0.0' /></c:if><c:if test='${myCollections[i].scorecount == 0}'><fmt:formatNumber value='0.0' pattern='0.0' /></c:if></font>分</p><h4 class = 'media-heading'><a href = 'javascript:show(" + myCollections[i].id + ")'>"
                                + myCollections[i].title + "</a></h4><div class = 'caption' style = 'margin-left: 5px' ><p>" + myCollections[i].introduce + "</p><p style = 'color: #999999'>" +
                                "<span class = 'glyphicon glyphicon-eye-open'></span>&nbsp;" +
                                "" + myCollections[i].views + "次浏览&nbsp;&nbsp;<span class ='glyphicon glyphicon-comment'></span>&nbsp;0条评论&nbsp;&nbsp;<span id='" + myCollections[i].id + "' class = 'glyphicon glyphicon-star'></span>&nbsp;<a href='javascript:unStoreTutorialForMyCollection(" + myCollections[i].id + ")' style='color:#999999'>取消收藏</a></p></div></div></div>");
                    }
                }else{
                    btn.hide();
                }
                if (!tutorialData.mycollections_requires_pagination) {
                    btn.hide();
                } else {
                    btn.button('reset')
                }
                page++;
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest);
                alert(textStatus);
                alert(errorThrown);
            }
        })
    });
</script>
</html>
